<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ajax-js版</title>
    <script>
        function change() {
            // 1. 创建xhr对象,用于同幕后服务器交换数据
            var xhr = new XMLHttpRequest();
            // 2. 定义当 readyState 属性发生变化时被调用的函数
            xhr.onreadystatechange = function () {
                //3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
                if (this.status == 200 && this.readyState == 4) {
                    // document.getElementById("d1").innerHTML="hi ajax";
                    //5.以字符串返回响应数据,并展示
                    document.getElementById("d1").innerHTML = this.responseText;
                }
            }
            //3.规定请求的类型(请求方式,文件位置,异步)
            xhr.open('get', 'D:\ApplicationFiles\vscode\chapter_three\JS相关案例\JS文件\3.json', true);
            //xhr.open('get','http://localhost:8080/car/get',true);
            //4.xhr将请求发送到服务器
            xhr.send();
        }
    </script>
</head>

<body>
    <!-- 点击时,使用ajax修改文字 -->
    <div id='d1' onclick="change()">你好</div>
</body>

</html>